<template>
  <el-dialog
    v-model="props.typeDialog"
    :title="props.typeForm?.title"
    :width="props.typeForm?.width"
    :show-close="false"
  >
    <div
      v-if="
        props.typeForm?.voucher == 'type' || props.typeForm?.voucher == 'type2'
      "
    >
      <el-input v-model="filterText" placeholder="可输入类型进行搜索" />
      <!-- <el-tree ref="treeRef" class="filter-tree" :data="data" node-key="id" :props="defaultProps" default-expand-all
                :filter-node-method="filterNode" @node-click="addChildren" /> -->
      <el-tree
        ref="treeRef"
        :data="data"
        :props="defaultProps"
        @node-click="addChildren"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :indent="10"
      >
        <template #default="{ node, data }">
          <span
            class="custom-tree-node show-hide"
            :class="{ active: currentNode.id == data.id }"
          >
            <el-tooltip
              :content="node.label"
              placement="top"
              v-if="node.label.length > 20"
            >
              <span class="treeLabel">{{ node.label }}</span>
            </el-tooltip>
            <span v-else>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
    <div v-else>
      <el-input v-model="modelName" placeholder="请输入设备型号名称" />
    </div>
    <template #footer>
      <div class="dialog-footer tips" v-if="props.typeForm?.voucher == 'type'">
        提示：选择需新增类型的节点，点击【新建类型】按钮，即可完成新增
      </div>
      <span class="dialog-footer">
        <el-row :gutter="20">
          <el-col :span="5" v-if="props.typeForm?.voucher == 'type'">
            <el-button @click="add">新建类型</el-button>
          </el-col>
          <el-col :span="5" v-else> </el-col>
          <el-col :span="9"> </el-col>
          <el-col :span="10">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submit"> 确定 </el-button>
          </el-col>
        </el-row>
      </span>
    </template>
    <AddDeviceType
      :deviceType="deviceType"
      @quxiao="quxiao"
      @queren="queren"
    ></AddDeviceType>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, ElTree } from 'element-plus'
import { ref, reactive, watch, defineAsyncComponent } from 'vue'
import { addDictionary, dictionaryList } from '/@/api/publicApi'
const AddDeviceType = defineAsyncComponent(() => import('./AddDeviceType.vue'))
const props = defineProps({
  typeDialog: Boolean,
  typeForm: Object
})
const emit = defineEmits(['toBack', 'deviceTypeSub'])

const filterText = ref('')
const modelName = ref('')
const deviceType = ref(false)
const treeRef = ref<InstanceType<typeof ElTree>>()
interface Tree {
  id: string
  configValue: string
  children?: Tree[]
  customizeFlag: number
  parentId: string
}
const data = ref<Tree[]>([])
const defaultProps = {
  children: 'children',
  label: 'configValue'
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

watch(
  () => props.typeDialog,
  () => {
    if (props.typeDialog == true) {
      filterText.value = ''
      if (props.typeForm?.id == '') {
        currentNode.value.id = ''
      } else {
        currentNode.value.id = props.typeForm?.id
      }
    }
  }
)

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.configValue.includes(value)
}

const nodeKey = ref('')
const nodeName = ref('')
const addChildren = (val: any) => {
  currentNode.value.id = val.id
  nodeKey.value = val.id
  nodeName.value = val.configValue
}

const cancel = () => {
  emit('toBack')
}

const submit = () => {
  if (props.typeForm?.voucher == 'type' || props.typeForm?.voucher == 'type2') {
    if (nodeName.value == '') {
      ElMessage.warning('请选择设备')
    } else {
      emit('deviceTypeSub', {
        deviceTypeId: nodeKey.value,
        deviceTypeName: nodeName.value
      })
    }
  } else {
    if (modelName.value == '') {
      ElMessage.warning('请填写型号名称')
    } else {
      emit('deviceTypeSub', { modelName: modelName.value })
      modelName.value = ''
    }
  }
}

let currentNode = ref({
  id: '',
  configValue: '',
  children: [],
  customizeFlag: 0,
  parentId: ''
})
const getDeviceType = () => {
  dictionaryList({ configType: 'device_type', keyword: '' }).then((res) => {
    if (res.code == 0) {
      data.value = res.data
    }
  })
}
getDeviceType()
const add = () => {
  if (nodeKey.value != '' || data.value.length == 0) {
    deviceType.value = !deviceType.value
  } else {
    ElMessage.warning('请先选择设备类型新建位置')
  }
}
const quxiao = () => {
  nodeKey.value = ''
  deviceType.value = !deviceType.value
}
const queren = (val: string) => {
  let params = {
    parentId: nodeKey.value,
    configType: 'device_type',
    configName: val,
    configValue: val
  }
  addDictionary(params).then((res) => {
    if (res.code == 0) {
      ElMessage.success('添加成功')
      deviceType.value = !deviceType.value
      nodeKey.value = ''
      getDeviceType()
    }
  })
}
</script>
<style scoped lang="scss">
.tips {
  font-size: 13px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(140, 140, 140, 1);
  text-align: left;
  margin-bottom: 12px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--el-font-size-base);
  padding-right: 8px;
}

.show-hide :nth-child(2) {
  display: none;
}

.show-hide:hover :nth-child(2) {
  display: inline-block !important;
}

.operate {
  a {
    color: var(--el-color-primary);
  }
}

.active {
  color: var(--el-color-primary);
}

.treeLabel {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
